<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>积分抽奖</title>
<link rel="stylesheet" type="text/css" href="/style/css/base.css"/>
<link rel="stylesheet" type="text/css" href="/style/css/xshop.css?ver=20170916" />
<link rel="stylesheet" type="text/css" href="/style/css/fu.shop.css"/>
<link rel="stylesheet" href="/style/css/iconfont.css">
<link rel="stylesheet prefetch" href="/style/css/photoswipe.css">
<link rel="stylesheet prefetch" href="/style/css/default-skin/default-skin.css">
<script src="/style/js/jquery-1.12.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/style/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/style/js/xShop.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body{background-color: #373737;}
.prize{width: 100%; height: 100%; background: url(/style/wei/images/me/prize/bg.jpg) no-repeat; background-size: 100% auto;}
.prize .area{float: left; width: 90%; height: auto; margin: 7rem 5% 0 3%;}
.prize .area .g1{position: absolute; width: 2rem; height: auto;}
.prize .area .g2{position: absolute; width: 2.4rem; height: auto; margin-left: 2.1rem;}
.prize .area .g3{position: absolute; width: 2.4rem; height: auto; margin-left: 4.6rem;}
.prize .area .g6{position: absolute; width: 2.4rem; height: auto; margin-top: 3.2rem;}
.prize .area .g5{position: absolute; width: 2.4rem; height: auto; margin: 3.2rem 0 0 2.5rem;}
.prize .area .g4{position: absolute; width: 2rem; height: auto; margin: 1.85rem 0 0 5rem;}
.prize .area .gbtn{position: absolute; width: 2.8rem; height: auto; margin: 2rem 0 0 2.1rem;}
.prize .area img{width: 100%; height: auto;}
.prize .text{float: left;width: 100%; height: auto; line-height: 1rem; text-align: center; font-size: .32rem; color: #fff; margin-top: 5rem;}
.prize .text span{color: #F3379D; margin: 0 .1rem;}
.prize .mask{position: absolute;width:2rem; height:  3rem; z-index: 1; background:rgba(255,255,255,0.5); display: none;}
.popmask{position: fixed;width:100%; height: 100%; background:rgba(0,0,0,.8); z-index: 5; top: 0; left: 0; display: none;}
.poprs{position: fixed;width:80%; height: 6rem; top: 30%; left: 10%; background-color: #F4379D; border-radius: 10px; z-index: 6; display: none;}
.poprs .gift{position: absolute;width:40%; height: auto; margin: -1rem 0 0 30%;}
.poprs .gift img{width: 100%; height: auto;}
.poprs .content{float:left;width: 100%; height: auto; text-align: center; margin-top: 30%; font-size: .4rem; color: #fff; line-height: .8rem;}
.poprs .content span{color: #FEDE14; font-size: .5rem;}
.poprs .content button{margin-top: .5rem; border-radius: 5px; color: #F4379D; background: #FEDE14; border:0; padding: .2rem .4rem;}
.poperr{position: fixed;width:80%; height: 6rem; top: 30%; left: 10%; background-color: #F4379D; border-radius: 10px; z-index: 6; text-align: center; display: none;}
.poperr img{width: 3rem; height: auto; margin-top: 1rem;}
.poperr p{margin-top: 1rem; font-size: .3rem; color: #FEDE14;}


</style>
</head>
<body>
<div class="prize">

	<div class="area">
		<div class="g1"><img src="/style/wei/images/me/prize/1.jpg"></div>
		<div class="g2"><img src="/style/wei/images/me/prize/2.jpg"></div>
		<div class="g3"><img src="/style/wei/images/me/prize/3.jpg"></div>
		<div class="g6"><img src="/style/wei/images/me/prize/4.jpg"></div>
		<div class="g5"><img src="/style/wei/images/me/prize/5.jpg"></div>
		<div class="g4"><img src="/style/wei/images/me/prize/6.jpg"></div>
		<div class="gbtn"><img src="/style/wei/images/me/prize/btn.jpg"></div>

		<div class="mask">
		</div>
	</div>

	<div class="text">
		您剩余<span><?=$this->balance['commission_jifen'];?></span>积分，可以参与抽奖次数<span><?=$this->balance['commission_jifen'];?></span>次！
	</div>

</div>

<div class="popmask">
</div>
<div class="poprs">
	<div class="gift"><img src="/style/wei/images/me/prize/gift.png"></div>
	<div class="content">恭喜您获得<br><span></span>
		<p><button>继续抽奖</button></p>
	</div>
</div>

<div class="poperr"><img src="/style/wei/images/me/prize/un_potice.png"><p>您的积分不足，无法参与抽奖。</p></div>

<script type="text/javascript">
$(document).ready(function(e){
	$(".prize .gbtn").on("click",function(){
		if(_running == 0)
		{
			_running = 1;
			_sendPrize();
		}
	});

	$(".poprs .content button").on("click",function(){
		$(".popmask,.poprs").css("display","none");
	})
});

var _g = _gid = 0,
_max_round = 6,
_now_round = 0,
_running = 0,
_names = {
	1:"iPhone X 1部",
	2:"现金奖500元",
	3:"迪拜单人7日游一次",
	4:"平台任选套盒1件",
	5:"现金奖30元",
	6:"现金奖200元"
};

function _sendPrize()
{
	if(_running == 1)
	{
		$.post("/user/ajax",
		{
			"act":"sendPrize",
			"mr":Math.random()
		},function(json){
			console.log(json);
			if(json.code == 200)
			{
				_gid = json.gid;
				$(".prize .text span").html(json.jifen);
				_now_round = _g = 0;
				_doPrize();
			}
			else if(json.code == 400)
			{
				$(".popmask,.poperr").css("display","block");
			}
		},"json");
	}
}

function _doPrize()
{
	if(_running == 1)
	if(_g < 6)
	{
		_g +=1;
	}	
	else if(_g == 6)
	{
		_now_round +=1;
		_g = 1;
	}

	var _obj = $(".prize .g"+_g);

	$(".mask").css(
	{
		"display":"block",
		"width": _obj.width(),
		"height":_obj.height(),
		"margin-top":_obj.css("margin-top"),
		"margin-left":_obj.css("margin-left")
	});

	if(_now_round < 3)
	{
		setTimeout(function(){
			_doPrize();
		},100);
	}
	else if(_now_round < 4)
	{
		setTimeout(function(){
			_doPrize();
		},200);
	}	
	else if(_now_round <5)
	{
		setTimeout(function(){
			_doPrize();
		},400);
	}
	else if(_now_round +1 == _max_round )
	{
		if(_g == _gid)
		{
			// 显示结果
			$(".popmask,.poprs").css("display","block");
			$(".poprs .content span").html(_names[_gid]);
			// 重置
			_g = _gid = 0;
			_now_round = 0;
			_running = 0;
		}
		else
		{
			setTimeout(function(){
				_doPrize();
			},500);
		}		
	}
	
}
</script>
</body>
</html>
